<template>
  <div
    :id="pid"
    class="quick-tool"
    :class="{ full: isScreenFull }"
    @dblclick.stop
    @mousedown.stop="mouseStop"
  >
    <div v-if="commonTool" class="common-tool">
      <div class="tool-tag">
        <span class="item" :class="{ on: tag === 0 }" @click="tagClick(0)"
          >云台控制</span
        >
        <span class="item" :class="{ on: tag === 1 }" @click="tagClick(1)"
          >巡航计划</span
        >
        <span class="item" :class="{ on: tag === 2 }" @click="tagClick(2)"
          >录像回放</span
        >
        <span class="item" :class="{ on: tag === 3 }" @click="tagClick(3)"
          >一键看向告警点</span
        >
      </div>
      <div class="tool-con">
        <div v-if="tag === 0" class="tool-control">
          <div class="control">
            <div class="control-left">
              <i
                class="iconfont icon-sanjiaoxing"
                style="--rotate: -45deg"
                @mousedown="doControl(5, 1)"
                @mouseup="doControl(5, 0)"
                @touchstart="doControl(5, 1)"
                @touchend="doControl(5, 0)"
              />
              <i
                class="iconfont icon-sanjiaoxing"
                style="--rotate: 0deg"
                @mousedown="doControl(1, 1)"
                @mouseup="doControl(1, 0)"
                @touchstart="doControl(1, 1)"
                @touchend="doControl(1, 0)"
              />
              <i
                class="iconfont icon-sanjiaoxing"
                style="--rotate: 45deg"
                @mousedown="doControl(6, 1)"
                @mouseup="doControl(6, 0)"
                @touchstart="doControl(6, 1)"
                @touchend="doControl(6, 0)"
              />
              <i
                class="iconfont icon-sanjiaoxing"
                style="--rotate: -90deg"
                @mousedown="doControl(3, 1)"
                @mouseup="doControl(3, 0)"
                @touchstart="doControl(3, 1)"
                @touchend="doControl(3, 0)"
              />
              <i class="iconfont icon-sanjiaoxing" style="visibility: hidden" />
              <i
                class="iconfont icon-sanjiaoxing"
                style="--rotate: 90deg"
                @mousedown="doControl(4, 1)"
                @mouseup="doControl(4, 0)"
                @touchstart="doControl(4, 1)"
                @touchend="doControl(4, 0)"
              />
              <i
                class="iconfont icon-sanjiaoxing"
                style="--rotate: -135deg"
                @mousedown="doControl(7, 1)"
                @mouseup="doControl(7, 0)"
                @touchstart="doControl(7, 1)"
                @touchend="doControl(7, 0)"
              />
              <i
                class="iconfont icon-sanjiaoxing"
                style="--rotate: 180deg"
                @mousedown="doControl(2, 1)"
                @mouseup="doControl(2, 0)"
                @touchstart="doControl(2, 1)"
                @touchend="doControl(2, 0)"
              />
              <i
                class="iconfont icon-sanjiaoxing"
                style="--rotate: 135deg"
                @mousedown="doControl(2, 1)"
                @mouseup="doControl(2, 0)"
                @touchstart="doControl(2, 1)"
                @touchend="doControl(2, 0)"
              />
            </div>
            <div class="control-right">
              <div class="item">
                <span class="it">
                  <i
                    class="iconfont"
                    :class="
                      controlLockingDuration > 0
                        ? 'icon-suoding'
                        : 'icon-jiesuo'
                    "
                    @click="doCloudLock()"
                    :c-tip="
                      controlLockingDuration > 0 ? '云台解锁' : '云台锁定'
                    "
                    c-tip-placement="bottom"
                    c-tip-class="c-tip-normal"
                  />
                  <span v-if="controlLockingDuration > 0" class="time">{{
                    controlLockingDurationF
                  }}</span>
                </span>
                <span class="it" v-if="controlLocking">
                  <i
                    class="iconfont icon-caozuoren"
                    :c-tip="controlLocking"
                    c-tip-placement="bottom"
                    c-tip-class="c-tip-normal"
                  />
                </span>
              </div>
              <div class="item">
                <span class="it">
                  <i
                    class="iconfont icon-bianbei-"
                    @mousedown="doControl(12, 1)"
                    @mouseup="doControl(12, 0)"
                    @touchstart="doControl(12, 1)"
                    @touchend="doControl(12, 0)"
                    c-tip="焦距缩小"
                    c-tip-placement="bottom"
                    c-tip-class="c-tip-normal"
                  />
                </span>
                <span class="it">
                  <i
                    class="iconfont icon-bianbei"
                    @mousedown="doControl(11, 1)"
                    @mouseup="doControl(11, 0)"
                    @touchstart="doControl(11, 1)"
                    @touchend="doControl(11, 0)"
                    c-tip="焦距放大"
                    c-tip-placement="bottom"
                    c-tip-class="c-tip-normal"
                  />
                </span>
              </div>
              <div class="item">
                <span class="it control-step">
                  <input
                    type="text"
                    v-model="controlStepF"
                    @focus="controlStepInput(1)"
                    @blur="controlStepInput(2)"
                    @input="controlStepInput(3)"
                    c-tip="步长"
                    c-tip-placement="bottom"
                    c-tip-class="c-tip-normal"
                  />
                  <span class="bb">
                    <i
                      class="up"
                      :class="{ disabled: controlStep >= 8 }"
                      @click="controlStepInput(2, 1)"
                    />
                    <i
                      class="down"
                      :class="{ disabled: controlStep <= 1 }"
                      @click="controlStepInput(2, -1)"
                    />
                  </span>
                </span>
              </div>
              <div class="item">
                <span class="it">
                  <span class="ll">巡航</span>
                  <i
                    class="iconfont"
                    :class="
                      cruisePauseDuration > 0
                        ? 'icon-liebiao-bofang'
                        : 'icon-liebiao-tingzhi'
                    "
                    @click="doCruisePause()"
                    :c-tip="cruisePauseDuration > 0 ? '巡航恢复' : '巡航暂停'"
                    c-tip-placement="bottom"
                    c-tip-class="c-tip-normal"
                  />
                  <span v-if="cruisePauseDuration > 0" class="time">{{
                    cruisePauseDurationF
                  }}</span>
                </span>
              </div>
            </div>
          </div>
          <div class="preset-list">
            <div class="til">
              <span class="ll">预置位</span>
              <div
                v-if="isTenant"
                class="c-button add-preset"
                @click="addPreset"
              >
                新增
              </div>
            </div>
            <div class="con" v-loading="!presetList">
              <div
                class="item"
                v-for="(item, index) in presetList"
                :key="index"
              >
                <el-input
                  ref="presetName"
                  v-model="item.presetNameInput"
                  class="c-input name"
                  :class="{ long: !isTenant, active: item.edit }"
                  placeholder="预置位名称"
                  @click.native="gotoPreset(item)"
                  :readonly="![1, 3].includes(item.edit)"
                  :c-tip="
                    item.edit !== 3 && item.presetId ? '转动到预置位' : ''
                  "
                  c-tip-class="c-tip-normal"
                >
                  <i
                    v-if="[1, 3].includes(item.edit)"
                    slot="suffix"
                    class="iconfont icon-qiyong ok"
                    @click.stop="savePreset(item, index)"
                    c-tip="保存"
                    c-tip-placement="bottom"
                    c-tip-class="c-tip-normal"
                  />
                  <i
                    v-if="[1, 3].includes(item.edit)"
                    slot="suffix"
                    class="iconfont icon-guanbi44 cancel"
                    @click.stop="cancelEditPreset(item, index)"
                    c-tip="取消"
                    c-tip-placement="bottom"
                    c-tip-class="c-tip-normal"
                  />
                </el-input>
                <i
                  v-if="item.edit === 2"
                  class="iconfont icon-qiyong btn ok"
                  @click.stop="savePreset(item, index)"
                  c-tip="保存"
                  c-tip-placement="bottom"
                  c-tip-class="c-tip-normal"
                />
                <i
                  v-if="item.edit === 2"
                  class="iconfont icon-guanbi44 btn cancel"
                  @click.stop="cancelEditPreset(item, index)"
                  c-tip="取消"
                  c-tip-placement="bottom"
                  c-tip-class="c-tip-normal"
                />
                <i
                  v-if="isTenant && item.edit !== 2"
                  class="iconfont icon-bianjiyuzhiwei btn"
                  :class="{ hide: item.edit || !item.presetId }"
                  @click="editPreset(item, 2)"
                  c-tip="编辑预置位位置"
                  c-tip-placement="bottom"
                  c-tip-class="c-tip-normal"
                />
                <i
                  v-if="isTenant && item.edit !== 2"
                  class="iconfont icon-kapianbianji btn"
                  :class="{ hide: item.edit || !item.presetId }"
                  @click="editPreset(item, 3)"
                  c-tip="编辑预置位名称"
                  c-tip-placement="bottom"
                  c-tip-class="c-tip-normal"
                />
                <i
                  v-if="isTenant"
                  class="iconfont icon-xunhangjihua-shanchu btn"
                  :class="{ hide: item.edit === 2 }"
                  @click="removePreset(item, index)"
                  c-tip="删除预置位"
                  c-tip-placement="bottom"
                  c-tip-class="c-tip-normal"
                />
              </div>
              <i v-if="noDatas(presetList)" class="c-no-datas">暂无数据</i>
            </div>
          </div>
        </div>
        <div v-if="tag === 1" class="tool-cruise">
          <el-input
            v-model="cruiseSearch"
            class="c-input cruise-search"
            suffix-icon="el-icon-search"
            placeholder="请输入关键字"
          />
          <div class="cruise-list" v-loading="!cruiseList">
            <template v-for="item in cruiseList">
              <div class="item" v-if="item.patrolName.includes(cruiseSearch)">
                <span
                  class="ll"
                  v-html="
                    $options.filters.filterColor(item.patrolName, cruiseSearch)
                  "
                  :c-tip="item.patrolName"
                  c-tip-class="c-tip-normal"
                  c-tip-auto
                ></span>
                <span
                  v-if="isTenant"
                  class="bb"
                  :class="{ on: +item.startStop === 2 }"
                  @click="doCruise(item)"
                  >{{ +item.startStop === 1 ? "开始" : "结束" }}</span
                >
              </div>
            </template>
            <i
              v-if="noDatas(cruiseList, 'patrolName', cruiseSearch)"
              class="c-no-datas"
              >暂无数据</i
            >
          </div>
        </div>
        <div v-show="tag === 2" class="tool-history">
          <VideoRecords
            :deviceCode="deviceCode"
            :channelCode="channelCode"
            :channelName="channelName"
            v-on="$listeners"
          />
        </div>
        <div v-if="tag === 3" class="tool-alarm">
          <el-date-picker
            v-model="alarmSearch"
            class="c-date-editor alarm-search"
            popper-class="c-date-editor-picker"
            type="daterange"
            value-format="yyyy-MM-dd"
            :picker-options="alarmPickerOptions"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :clearable="false"
            :editable="false"
            @focus="setAlarmPickerOptions"
            @change="getAlarmList()"
            :append-to-body="false"
          />
          <div class="alarm-list" v-loading="!alarmList">
            <div
              class="item"
              :class="{ on: item.selected }"
              v-for="(item, index) in alarmList"
              :key="index"
              @click="alarmSelect(item)"
            >
              <img
                :src="item.imgUrl || defaultImage"
                @error="
                  (e) => {
                    e.target.src = defaultImage;
                  }
                "
              />
              <i
                class="type"
                :c-tip="item.warningSourceName"
                c-tip-class="c-tip-normal"
                c-tip-auto
                >{{ item.warningSourceName }}</i
              >
              <div class="info">
                <span
                  class="ll"
                  :c-tip="item.alarmBody"
                  c-tip-class="c-tip-normal"
                  c-tip-auto
                  >{{ item.alarmBody }}</span
                >
                <span
                  class="addr"
                  :c-tip="item.address"
                  c-tip-class="c-tip-normal"
                  c-tip-auto
                  >{{ item.address }}</span
                >
                <span
                  class="time"
                  :c-tip="item.alarmTime"
                  c-tip-class="c-tip-normal"
                  c-tip-auto
                  >{{ item.alarmTime }}</span
                >
                <span v-if="item.showTime" class="over">{{
                  item.showTime
                }}</span>
                <i
                  class="iconfont collect"
                  :class="
                    item.isCollection === '1'
                      ? 'icon-shipinzujian_icon_shoucang_s'
                      : 'icon-shipinzujian_icon_shoucang_n'
                  "
                  @click.stop="alarmCollect(item)"
                  :c-tip="
                    item.isCollection === '1'
                      ? '取消收藏告警事件'
                      : '收藏告警事件'
                  "
                  c-tip-class="c-tip-normal"
                ></i>
                <span class="bb" @click.stop="gotoAlarmDetail(item)">详情</span>
              </div>
            </div>
            <div class="c-page" v-if="alarmList">
              <span class="c-total">共{{ total }}条</span>
              <el-pagination
                v-if="total > 0"
                class="c-pagination"
                background
                layout="prev, pager, next"
                :current-page="pageNum"
                :page-size="pageSize"
                :total="total"
                :pager-count="5"
                @current-change="getAlarmList"
              />
              <i
                class="iconfont icon-shuaxinicon c-refresh"
                @click="getAlarmList()"
              ></i>
            </div>
            <i v-if="noDatas(alarmList)" class="c-no-datas">暂无数据</i>
          </div>
        </div>
      </div>
    </div>
    <div v-if="ar.type !== 1 || !isScreenFull" class="tool-btns">
      <div v-if="isVideoOpen" class="b-scale">
        <i
          class="iconfont icon-fangda2"
          :disabled="!bigFlag || isScreenFull"
          @click="changeBigClick()"
          c-tip="放大"
          c-tip-placement="right"
          c-tip-class="c-tip-normal"
        ></i>
        <i
          class="iconfont icon-AR-suoxiao"
          :disabled="!smallFlag || isScreenFull"
          @click="changeSmallClick()"
          c-tip="缩小"
          c-tip-placement="right"
          c-tip-class="c-tip-normal"
        ></i>
        <i
          v-if="ar.type === 1"
          class="iconfont icon-qiujichuangkouqiehuan"
          :c-tip="ar.switchText"
          c-tip-placement="right"
          c-tip-class="c-tip-normal"
          @click="switchVideo"
        ></i>
      </div>
      <i
        v-if="showQuickTool"
        class="iconfont tool-btn"
        :class="
          commonTool
            ? 'icon-shipinzujian_icon_changyonggongnengxianyin_s'
            : 'icon-shipinzujian_icon_changyonggongnengxianyin_n'
        "
        @click="commonToolClick"
        c-tip="常用功能"
        c-tip-placement="right"
        c-tip-class="c-tip-normal"
      ></i>
      <i
        v-if="ar.type === 1"
        class="iconfont tool-btn"
        :class="
          isVideoOpen
            ? 'icon-zuoxiachuangkoushouqi'
            : 'icon-zuoxiachuangkouzhankai'
        "
        :disabled="isScreenFull"
        @click="doVideoOpen"
        :c-tip="isVideoOpen ? ar.openText[0] : ar.openText[1]"
        c-tip-placement="right"
        c-tip-class="c-tip-normal"
      ></i>
    </div>
  </div>
</template>
<script>
import store from "@/store";
import {
  doCameraFocusOrZoom,
  doControlPreset,
  doLock,
  doPtzCmds,
  doPtzLocationCmd,
  doRelease,
  queryPatrol,
  queryPlatFormLockInfo,
  queryPresetList,
} from "@/api/video/video";
import { doPatrol } from "@/api/video/cruiseConfig";
import { $v, DateFormat } from "@/utils/public";
import { getOrderList } from "@/api/modules/eventManagement/eventManagement";
import {
  addWarningOrderCollection,
  delWarningOrderCollection,
} from "@/api/modules/eventManagement/view";
import { getOrderInfo } from "@/api/modules/eventManagement/eventDetail";
import {
  addCameraPreset,
  delCameraPreset,
  pauseResumePatrol,
  queryPauseResumePatrolInfo,
  updatePresetInfo,
  updatePresetName,
} from "@/api/video";
import { getOrderIfEdit } from "@/api/alarmEvent";
import VideoRecords from "@/views/pages/video/components/videoRecords.vue";
import default_image from "@/assets/image/default_image.jpg";
const COMMON_TOOL_WIDTH = 338; //常用功能宽度
const TOOL_BTNS_WIDTH = 46; //快捷功能按钮宽度

export default {
  components: {
    VideoRecords,
  },
  filters: {
    filterColor(value, key) {
      if (key && value && value.indexOf(key) !== -1) {
        return value.replaceAll(
          key,
          '<font style="font-weight: bold">' + key + "</font>"
        );
      }
      return value;
    },
  },
  computed: {
    store() {
      return store;
    },
    /**
     * 无数据
     */
    noDatas() {
      return function (list, searchkey, searchValue = "") {
        if (!list) {
          return false;
        }
        const l = [];
        list.forEach((item) => {
          if (searchkey) {
            if (item[searchkey].includes(searchValue)) {
              l.push(item);
            }
            return false;
          }
          l.push(item);
        });
        return !l.length;
      };
    },
  },
  data() {
    return {
      pid: this.getUUID(), //页面唯一id
      commonTool: false, //常用功能
      tag: 0, //页签标识, 0: 云台控制, 1: 巡航计划, 2: 录像回放, 3: 一键看向告警点
      controlLocking: false, //云台操控锁定人
      controlLockingDuration: 0, //云台操控锁定时间
      controlLockingDurationF: "", //云台操控锁定时间格式化
      controlStep: 5, //云台操控速度
      controlStepF: "5X", //云台操控速度
      cruisePauseDuration: 0, //暂停巡航时间
      cruisePauseDurationF: "", //暂停巡航时间格式化
      presetList: null, //预置位列表
      presetMax: 0, //预置位名称自增最大数字
      cruiseSearch: "", //巡航检索
      cruiseList: null, //巡航列表
      alarmSearch: "", //一键看向告警点 检索
      alarmList: null, //一键看向告警点 告警列表
      alarmPickerOptions: {}, //一键看向告警点 时间选择参数
      requestId: false, //请求处理
      pageNum: 1,
      pageSize: 10,
      total: 0,
      dragMaxWidth: 1490, //放大最大宽度
      dragMaxHeight: 839, //放大最大高度
      dragMinWidth: 380, //缩小最小宽度
      dragMinHeight: 214, //缩小最小高度
      commonWidth: 932, //常用功能可用最小宽度
      commonHeight: 525, //常用功能可用最小高度
      isScreenFull: false, //是否全屏
      bigFlag: true, //放大按钮可用标识
      smallFlag: true, //缩小按钮可用标识
      leftPosition: false, //缓存位置
      topPosition: false, //缓存位置
      isTenant: "", //是否租户
      userId: "",
      permissions: "",
      defaultImage: default_image,
    };
  },
  // props: ['deviceCode', 'channelCode', 'myTransform'],
  props: {
    deviceCode: {
      type: String,
    },
    channelCode: {
      type: String,
    },
    channelName: {},
    myTransform: {
      type: Number,
    },
    vueIns: {
      type: Object,
      default: () => {
        return {};
      },
    },
    division: {
      // 判断分屏视频定位是否启用
      type: String,
      default: "0",
    },
    index: {
      //序号
      type: Number,
    },
    showQuickTool: {
      // 判断快捷方式是否显示
      type: Boolean,
      default: true,
    },
    isVideoOpen: {
      //是否打开播放器
      type: Boolean,
      default: true,
    },
    ar: {
      //ar大屏定制
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  mounted() {
    if (Object.keys(this.vueIns).length) {
      this.$store = this.vueIns.$store;
    }
    this.tenantId = this.isTenant = this.$store.getters.userInfo.tenantId;
    this.userId = this.$store.getters.userInfo.userId;
    this.permissions = this.$store.getters.permissions;
    this.resizeObserver = new ResizeObserver(() => {
      this.getVideoBoxSize();
      clearTimeout(this.resizeTiming);
      this.resizeTiming = setTimeout(() => {
        this.checkScreenFull();
        this.countAlarmList(true);
      }, 200);
    });
    this.resizeObserver.observe($("#" + this.pid)[0]);
    this.checkScreenFull();
    this.getInitViewBox();
    this.getVideoBoxSize();
    this.initalarm();
  },
  methods: {
    mouseStop(e) {
      $(e.target)
        .parents(".video-item-body, .video-item-body-c")
        .find(".video-item")
        .removeClass("on");
      $(e.target).parents(".video-item").addClass("on");
    },
    /**
     * 切换视频
     */
    switchVideo() {
      this.$emit("switchVideo", this.index);
    },
    /**
     * 隐藏显示播放器
     */
    doVideoOpen() {
      if (this.isScreenFull) {
        return false;
      }
      this.changeSmallClick();
      this.$emit("videoOpen", this.index, !this.isVideoOpen);
    },
    /**
     * 最小化
     */
    toMinimize(status) {
      if (status === this.isVideoOpen) {
        this.doVideoOpen();
      }
    },
    //获取放大比例
    getInitViewBox() {
      const winW = $(window).width();
      this.dragMaxWidth = parseInt(((this.ar.maxWidth || 1490) / 1920) * winW);
      this.dragMaxHeight = parseInt((this.dragMaxWidth * 9) / 16);
      this.dragMinWidth = parseInt(this.ar.minWidth || 380);
      this.dragMinHeight = parseInt((this.dragMinWidth * 9) / 16);
      this.commonWidth = parseInt((932 / 1920) * winW);
      this.commonHeight = parseInt((this.commonWidth * 9) / 16);
    },
    //监听获取视频播放容器大小
    getVideoBoxSize() {
      const $parent = $("#" + this.pid).parents(".video-dialog");
      const realW = Math.ceil($parent.outerWidth() * this.myTransform);
      if (realW <= this.dragMinWidth) {
        this.smallFlag = false;
      } else {
        this.smallFlag = true;
      }
      if (realW >= this.dragMaxWidth) {
        this.bigFlag = false;
      } else {
        this.bigFlag = true;
      }
    },
    moveVideoBoxPosition() {
      const $parent = $("#" + this.pid).parents(".video-dialog");
      const top = $parent.offset().top;
      const left = $parent.offset().left;
      const realW = Math.ceil($parent.outerWidth() * this.myTransform);
      const realH = Math.ceil($parent.outerHeight() * this.myTransform);
      const bTop = top + realH;
      const rLeft = left + realW;
      //保存移动后的位置
      this.leftPosition = left;
      this.topPosition = top;
      if (this.leftPosition < 20) {
        this.leftPosition = 20;
      }
      if (this.topPosition < 20) {
        this.topPosition = 20;
      }
      return { top, left, bTop, rLeft, realW, realH };
    },
    //点击放大(按屏幕比例)
    changeBigClick(
      zoomW = this.dragMaxWidth,
      zoomH = this.dragMaxHeight,
      flag
    ) {
      if ((!this.bigFlag && !flag) || this.isScreenFull) {
        return false;
      }
      let bottom,
        right,
        { top, left, bTop, rLeft, realW, realH } = this.moveVideoBoxPosition();
      if (rLeft - left > zoomW) {
        zoomW = realW;
        zoomH = realH;
      }
      const winW = $(window).width();
      const winH = $(window).height();
      if (top + zoomH > winH && top > winH / 2) {
        top = bTop - zoomH;
      }
      if (left + zoomW > winW && left > winW / 2) {
        left = rLeft - zoomW;
      }
      bottom = winH - top - zoomH;
      right = winW - left - zoomW - TOOL_BTNS_WIDTH;
      if (this.commonTool) {
        right -= COMMON_TOOL_WIDTH;
      }
      if (top < 20) {
        top = 20;
      }
      if (left < 20) {
        left = 20;
      }
      if (bottom - 20 < 0) {
        top += bottom - 20;
      }
      if (right - 20 < 0) {
        left += right - 20;
      }
      let params = {
        width: zoomW / this.myTransform,
        height: zoomH / this.myTransform,
        left,
        top,
      };
      if (this.division === "1") {
        params = {
          width: zoomW / this.myTransform,
          height: zoomH / this.myTransform,
          position: "fixed",
          left: 0,
          top: 0,
        };
      }
      $("#" + this.pid)
        .closest(".video-dialog")
        .css(params);
      if (this.ar.type === 1) {
        this.$emit("toMax", this.index);
      }
    },
    //点击缩小
    changeSmallClick() {
      if (!this.smallFlag || this.isScreenFull) {
        return false;
      }
      // 关闭常用功能
      this.commonTool = false;
      if (!this.leftPosition || !this.topPosition) {
        this.moveVideoBoxPosition();
      }
      const params = {
        width: this.dragMinWidth,
        height: this.dragMinHeight,
        left: this.leftPosition,
        top: this.topPosition,
      };
      $("#" + this.pid)
        .parents(".video-dialog")
        .css(params);
      if (this.ar.type === 1) {
        this.$emit("toMin", this.index);
      }
    },
    //常用功能按钮点击
    commonToolClick() {
      this.commonTool = !this.commonTool;
      if (this.commonTool === true) {
        if (this.division === "1") {
          $("#videoDialog" + this.index).css({
            left: 0,
            top: 0,
          });
        }
      }

      this.tagClick(this.tag);
      if (this.commonTool) {
        //显示常用功能（视频尺寸需大于等于932px*525px）
        this.changeBigClick(this.commonWidth, this.commonHeight, true);
      }
    },
    /**
     * 页签点击
     */
    tagClick(tag) {
      this.tag = tag;
      if (tag === 0) {
        this.getPresetList();
        this.getControlLock();
        this.getCruisePause();
      }
      if (tag === 1) {
        this.getCruiseList();
      }
      if (tag === 3) {
        this.getAlarmList();
      }
    },
    /**
     * 加载
     */
    reload() {
      if (!this.commonTool) {
        return false;
      }
      if (this.tag === 0) {
        this.getPresetList(true);
        this.getControlLock();
        this.getCruisePause();
      }
      if (this.tag === 1) {
        this.getCruiseList(true);
      }
    },
    /**
     * 暂停巡航
     */
    doCruisePause() {
      if (!this.checkPermissions("video:videoControlRole", true)) {
        return false;
      }
      const pauseResumeStatus = this.cruisePauseDuration > 0 ? "4" : "3"; //3: 暂停, 4: 恢复
      const params = {
        deviceCode: this.deviceCode,
        channelCode: this.channelCode,
        pauseResumeStatus,
      };
      pauseResumePatrol(params)
        .then((resp) => {
          if (resp.code === 200) {
            if (pauseResumeStatus === "4") {
              $message.s("巡航恢复成功");
            } else {
              $message.s("巡航暂停成功");
            }
          } else {
            $message.a(resp);
          }
          this.cruisePauseDuration = Number(resp.data) || 0;
          this.countDuration("cruisePauseDuration");
        })
        .catch((error) => {
          this.cruisePauseDuration = 0;
        });
    },
    /**
     * 查询暂停巡航信息
     */
    getCruisePause() {
      const params = {
        deviceCode: this.deviceCode,
        channelCode: this.channelCode,
      };
      queryPauseResumePatrolInfo(params)
        .then((resp) => {
          this.cruisePauseDuration = Number(resp.data) || 0;
          this.countDuration("cruisePauseDuration");
        })
        .catch((error) => {
          this.cruisePauseDuration = 0;
        });
    },
    /**
     * 云台操控锁定、解锁
     */
    doCloudLock() {
      if (!this.checkPermissions("video:videoControlRole", true)) {
        return false;
      }
      const params = {
        deviceCode: this.deviceCode, //设备编码
        channelCode: this.channelCode, //通道编码
        customerCode: this.isTenant, //租户id
        duration: 900, //有效时长单位秒
      };
      if (this.controlLockingDuration > 0) {
        //解锁
        doRelease(params).then((resp) => {
          if (resp.code === 200) {
            $message.s("解锁成功");
            this.controlLocking = false;
            this.controlLockingDuration = 0;
          } else {
            $message.a(resp);
          }
        });
      } else {
        doLock(params)
          .then((resp) => {
            if (resp.code !== 200) {
              $message.a(resp);
              this.getControlLock();
              return false;
            }
            $message.s("锁定成功");
            if (resp.data?.duration) {
              this.controlLocking = false;
              this.controlLockingDuration = resp.data.duration;
              this.countDuration("controlLockingDuration");
            } else {
              this.getControlLock();
            }
          })
          .catch((error) => {
            this.getControlLock();
          });
      }
    },
    /**
     * 查询云台操控锁
     */
    getControlLock() {
      const params = {
        deviceCode: this.deviceCode,
        channelCode: this.channelCode,
      };
      queryPlatFormLockInfo(params)
        .then((resp) => {
          this.controlLocking = false;
          const { userCode, userName, waitDuration } = resp.data || {};
          this.controlLockingDuration = waitDuration || 0;
          if (this.controlLockingDuration > 0 && userCode !== this.userId) {
            this.controlLocking = userName + "正在操控云台";
            this.controlLockingDuration = 0;
          }
          this.countDuration("controlLockingDuration");
        })
        .catch((error) => {
          this.controlLocking = false;
          this.controlLockingDuration = 0;
        });
    },
    /**
     * 倒计时
     */
    countDuration(key, over) {
      const _this = this;
      clearInterval(_this[key + "Timing"]);
      _this[key]++;
      _this[key + "Timing"] = setInterval(
        (function count() {
          _this[key]--;
          if (_this[key] <= 0) {
            clearInterval(_this[key + "Timing"]);
            over && over();
            _this[key] = 0;
            _this[key + "F"] = "";
            return false;
          }
          _this[key + "F"] = `${String(parseInt(_this[key] / 60)).padStart(
            2,
            "0"
          )}:${String(_this[key] % 60).padStart(2, "0")}`;
          return count;
        })(),
        1000
      );
    },
    /**
     * 云台操控速度计算
     */
    controlStepInput(type, num = 0) {
      if (type === 1) {
        this.controlStepF = this.controlStep;
      } else {
        let step = parseInt(this.controlStepF);
        if (isNaN(step)) {
          step = this.controlStep;
        }
        step += num;
        if (step < 1) {
          step = 1;
        }
        if (step > 8) {
          step = 8;
        }
        this.controlStep = step;
        if (this.controlStepF !== "") {
          this.controlStepF = step;
        }
        if (type === 2) {
          this.controlStepF = this.controlStep + "X";
        }
      }
    },
    /**
     * 云台操控
     */
    async doControl(operType, operContent) {
      if (!this.checkPermissions("video:videoControlRole", operContent === 1)) {
        return false;
      }
      const params = {
        deviceCode: this.deviceCode, //设备编码
        channelCode: this.channelCode, //通道编码
        customerCode: this.tenantId, //租户id
        operType: operType, //云台操作方向
        operContent: operContent, //转动开始/结束 1开始, 0结束
        step: this.controlStep, //速度
      };
      let resp;
      if (operType <= 8) {
        resp = await doPtzCmds(params);
      } else {
        resp = await doCameraFocusOrZoom(params);
      }
      if (operContent === 0 && resp.code === 200) {
        this.$emit("getCompass", null);
      }
      if (operContent === 1) {
        if (resp.code !== 200) {
          $message.a(resp);
        }
        this.getControlLock();
      }
    },
    /**
     * 转动到预置位
     */
    gotoPreset(item, auto) {
      if (!this.checkPermissions("video:videoPreset", true)) {
        return false;
      }
      if (!item.presetId || item.edit === 3) {
        return false;
      }
      let params = {
        deviceCode: this.deviceCode, //设备编码
        channelCode: this.channelCode, //通道编码
        presetId: item.presetId, //预置位 id
        customerCode: this.tenantId, //租户id
      };
      doControlPreset(params).then((resp) => {
        if (resp.code === 200) {
          if (!auto) {
            $message.s("转动预置位成功");
          }
        } else {
          $message.a(resp);
        }
        this.getControlLock();
      });
    },
    /**
     * 新增预置位
     */
    addPreset() {
      if (!this.checkPermissions("video:videoPreset", true)) {
        return false;
      }
      if (!this.presetList) {
        return false;
      }
      this.presetList.forEach((item) => {
        item.presetNameInput = item.presetName;
        this.$set(item, "edit", false);
      });
      if (!this.presetList.length || this.presetList[0].presetId) {
        const num = this.presetMax + 1;
        this.presetList.unshift({
          presetName: "预置位" + num,
          presetNameInput: "预置位" + num,
          edit: 1,
        });
      }
      this.$nextTick(() => {
        this.$set(this.presetList[0], "edit", 1);
        this.$refs["presetName"][0].focus();
        this.gotoPreset(this.presetList[0], true);
      });
    },
    /**
     * 预置位取消编辑
     */
    cancelEditPreset(item, index) {
      item.presetNameInput = item.presetName;
      item.edit = false;
      if (!item.presetId) {
        this.presetList.splice(index, 1);
      }
    },
    /**
     * 保存预置位
     */
    async savePreset(item, index) {
      if (!item.presetNameInput.replace(/ /g, "")) {
        $message.w("请输入预置位名称");
        return false;
      }
      //预置位名称不可重复
      const isSame = this.presetList.some(
        (it, i) => it.presetNameInput === item.presetNameInput && index !== i
      );
      if (isSame) {
        $message.w("预置位名称不可重复");
        return false;
      }
      const params = {
        deviceCode: this.deviceCode, //设备编码
        channelCode: this.channelCode, //通道编码
        presetName: item.presetNameInput, //预置位名称
        reqFrom: "0", // 请求来源 0:pc端  1:app端
        customerCode: this.tenantId, //租户id
        tenantId: this.tenantId, //租户id
      };
      let resp;
      if (item.presetId) {
        params.presetId = item.presetId;
        if (item.edit === 2) {
          resp = await updatePresetInfo(params);
        } else {
          resp = await updatePresetName(params);
        }
      } else {
        resp = await addCameraPreset(params);
      }
      if (resp.code === 200) {
        $message.s("预置位保存成功");
        item.edit = false;
        this.getPresetList(true);
      } else {
        $message.a(resp);
      }
    },
    /**
     * 编辑预置位 type: 2-编辑预置位位置, 3-编辑预置位名称
     */
    editPreset(item, type) {
      if (!this.checkPermissions("video:videoPreset", true)) {
        return false;
      }
      if (!this.presetList[0].presetId) {
        this.presetList.splice(0, 1);
      }
      this.$nextTick(() => {
        this.presetList.forEach((it, index) => {
          it.presetNameInput = it.presetName;
          this.$set(it, "edit", false);
          if (item.presetId === it.presetId) {
            this.$set(it, "edit", type);
            this.$refs["presetName"][index].focus();
          }
        });
      });
      this.gotoPreset(item, true);
    },
    /**
     * 删除预置位
     */
    removePreset(item, index) {
      if (!this.checkPermissions("video:videoPreset", true)) {
        return false;
      }
      if (!item.presetId) {
        this.presetList.splice(index, 1);
        return false;
      }
      const params = {
        deviceCode: this.deviceCode, //设备编码
        channelCode: this.channelCode, //通道编码
        presetId: item.presetId, //预置位 id
        customerCode: this.tenantId, //租户id
      };
      delCameraPreset(params).then((resp) => {
        if (resp.code === 200) {
          $message.s("预置位删除成功");
          this.presetList.splice(index, 1);
          this.getPresetList(true);
        } else {
          $message.a(resp);
        }
      });
    },
    /**
     * 查询预置位列表
     */
    getPresetList(reload) {
      let params = {
        deviceCode: this.deviceCode, //设备编码
        channelCode: this.channelCode, //通道编码
        customerCode: this.tenantId, //租户id
      };
      const requestId = (this.requestId = Date.now());
      if (!reload) {
        this.presetList = null;
      }
      this.presetMax = 0;
      queryPresetList(params)
        .then((resp) => {
          if (requestId !== this.requestId) {
            return false;
          }
          if (resp.code === 200) {
            resp.data.forEach((item) => {
              item.presetNameInput = item.presetName;
              const num = this.getNum(item.presetName);
              if (num > this.presetMax) {
                this.presetMax = num;
              }
            });
            this.presetList = resp.data;
          } else {
            this.presetList = [];
            $message.a(resp);
          }
        })
        .catch((error) => {
          if (requestId !== this.requestId) {
            return false;
          }
          this.presetList = [];
        });
    },
    /**
     * 获取后面数字部分
     */
    getNum(str) {
      let num = Number(str.replace("预置位", ""));
      if (isNaN(num)) {
        num = this.presetMax;
      }
      return num;
    },
    /**
     * 初始化一键看向告警点
     */
    initalarm() {
      const nowDate = DateFormat.getDayStr(); //当前日期
      const before = this.getRangeDate(nowDate, -1); //前一个月
      this.alarmSearch = [before, nowDate];
      this.countAlarmList();
    },
    /**
     * 计算告警列表
     */
    countAlarmList(flag) {
      const conH = $("#" + this.pid + " .tool-con").outerHeight();
      const h = conH - 70;
      const pageSize = Math.floor(h / 110) || 1;
      if (pageSize !== this.pageSize) {
        this.pageSize = pageSize;
        if (flag && this.tag === 3) {
          this.getAlarmList();
        }
      }
    },
    /**
     * 选择告警
     */
    alarmSelect(item) {
      this.alarmList.forEach((it) => {
        this.$set(it, "selected", false);
      });
      this.$set(item, "selected", true);
      const params = {
        orderId: item.orderId,
        orderStatus: item.orderStatus,
      };
      const requestId = (this.requestId = Date.now());
      getOrderInfo(params).then((resp) => {
        if (requestId !== this.requestId) {
          return false;
        }
        if (resp.code === 200) {
          this.gotoPTZ(resp.data.rows[0].order);
        } else {
          $message.a(resp);
        }
      });
    },
    /**
     * 转到到ptz
     */
    gotoPTZ(info) {
      const { pan, tilt, zoom, presetId } = info;
      const ptz = Number(pan) !== 0 || Number(tilt) !== 0 || Number(zoom) !== 0;
      if (!ptz && !presetId) {
        $message.w("该事件无PTZ或预置位信息，不支持此功能");
        return false;
      }
      if (ptz) {
        const params = {
          deviceCode: this.deviceCode,
          channelCode: this.channelCode,
          pan,
          tilt,
          zoom,
          ptzIsEsc: "1",
        };
        doPtzLocationCmd(params).then((resp) => {
          if (resp.code === 200) {
            $message.s("转动成功");
          } else {
            $message.a(resp);
          }
        });
      } else {
        const params = {
          deviceCode: this.deviceCode,
          channelCode: this.channelCode,
          presetId: presetId, //预置位 id
          customerCode: this.tenantId, //租户id
        };
        doControlPreset(params).then((resp) => {
          if (resp.code === 200) {
            $message.s("转动成功");
          } else {
            $message.a(resp);
          }
        });
      }
    },
    /**
     * 设置告警时间选择限制
     */
    setAlarmPickerOptions() {
      let selectDate = "";
      this.alarmPickerOptions = {
        shortcuts: [
          {
            text: "今日",
            onClick(picker) {
              const start = new Date();
              const end = new Date();
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "近3天",
            onClick(picker) {
              const start = new Date();
              const end = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 2);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "近7天",
            onClick(picker) {
              const start = new Date();
              const end = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 6);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "近30天",
            onClick(picker) {
              const start = new Date();
              const end = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 29);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
        onPick: ({ maxDate, minDate }) => {
          selectDate = minDate.getTime();
          if (maxDate) {
            selectDate = "";
          }
        },
        disabledDate: (time) => {
          if (selectDate !== "") {
            const before = this.getRangeDate(
              DateFormat.getDayStr(selectDate),
              -1
            );
            const after = this.getRangeDate(
              DateFormat.getDayStr(selectDate),
              1
            );
            const minTime = new Date(before).getTime() - 86400000;
            const maxTime = new Date(after).getTime();
            let day = time.getTime();
            return day < minTime || day > maxTime || day > Date.now();
          } else {
            return time.getTime() > Date.now();
          }
        },
      };
    },
    /**
     * 查看告警详情
     */
    async gotoAlarmDetail(item) {
      let url,
        params,
        searchParams = { operateType: "1", pageNum: 1, pageSize: 10 };
      const { orderId, orderStatus } = item;
      url = "/eventLinks";
      params = {
        orderId,
        orderStatus,
        pageType: false,
        searchParams: JSON.stringify(searchParams),
        list: JSON.stringify([{ orderId, orderStatus }]),
      };
      await getOrderIfEdit({
        warningOrderId: orderId,
      }).then((resp) => {
        if (resp.code === 200) {
          params.ifEdit = resp.data;
        }
      });
      $v.jumpMenu(this, { url, params }, true);
    },
    /**
     * 告警收藏
     */
    async alarmCollect(item) {
      const params = {
        warningOrderId: item.orderId,
        alarmTime: item.alarmTime,
      };
      let resp;
      if (item.isCollection === "1") {
        resp = await delWarningOrderCollection(params);
      } else {
        resp = await addWarningOrderCollection(params);
      }
      if (resp.code === 200) {
        item.isCollection = item.isCollection === "1" ? "0" : "1";
      } else {
        $message.a(resp);
      }
    },
    /**
     * 查询告警列表
     */
    getAlarmList(pageNum = 1) {
      this.pageNum = pageNum;
      const params = {
        deviceCode: [this.deviceCode], //设备编码
        searchType: "0", //0-全部；1待办;2已办
        alarmTimeStart: this.alarmSearch[0] + " 00:00:00", //开始时间
        alarmTimeEnd: this.alarmSearch[1] + " 23:59:59", //结束时间
        pageNum: this.pageNum, //页码
        pageSize: this.pageSize, //每页显示条数
      };
      const requestId = (this.requestId = Date.now());
      this.alarmList = null;
      getOrderList(params)
        .then((resp) => {
          if (requestId !== this.requestId) {
            return false;
          }
          if (resp.code === 200) {
            this.alarmList = resp.rows || [];
            this.total = resp.total;
          } else {
            this.alarmList = [];
            this.total = 0;
          }
        })
        .catch((error) => {
          if (requestId !== this.requestId) {
            return false;
          }
          this.alarmList = [];
          this.total = 0;
        });
    },
    /**
     * 开始、结束巡航
     */
    doCruise(item) {
      if (!this.checkPermissions("video:videoCruisePlan", true)) {
        return false;
      }
      if (item.loading) {
        return false;
      }
      const patrolType = item.startStop === "2" ? 1 : 2; //控制类型 1-停用；2-启用
      const params = {
        deviceCode: item.deviceCode, //设备编码
        channelCode: item.channelCode, //通道编码
        patrolId: item.patrolId, //巡航路径id
        patrolType: patrolType, //控制类型 1-停用；2-启用
        tenantId: this.tenantId, //租户id
      };
      item.loading = true;
      doPatrol(params)
        .then((res) => {
          item.loading = false;
          if (res.code === 200) {
            this.getCruiseList(true);
            $message.s(res.msg);
          } else if (res.code === 204) {
            this.getCruiseList(true);
            $message.w(res.msg);
          } else {
            $message.a(res);
          }
        })
        .catch((error) => {
          item.loading = false;
        });
    },
    /**
     * 查询巡航列表
     */
    getCruiseList(reload) {
      const params = {
        deviceCode: this.deviceCode, //设备编码
        // channelCode: this.channelCode, //通道编码
      };
      if (!reload) {
        this.cruiseList = null;
      }
      queryPatrol(params)
        .then((resp) => {
          if (resp.code === 200) {
            this.cruiseList = resp.data || [];
          } else {
            this.cruiseList = [];
            $message.a(resp);
          }
        })
        .catch((error) => {
          this.cruiseList = [];
        });
    },
    /**
     * 校验权限
     */
    checkPermissions(value, ts) {
      const all = "*:*:*";
      const permissions = this.permissions || [];
      const b = permissions.includes(all) || permissions.includes(value);
      if (!b && ts) {
        if (value === "video:videoControlRole") {
          $message.w("您没有云台控制权限，请联系管理员。");
        } else if (value === "video:videoPreset") {
          $message.w("您没有预置位控制权限，请联系管理员。");
        } else if (value === "video:videoCruisePlan") {
          $message.w("您没有巡航控制权限，请联系管理员。");
        } else {
          $message.w("您暂无权限，如需获取权限，请联系管理员。");
        }
      }
      return b;
    },
    /**
     * 获取区间时间段
     */
    getRangeDate(startDate, rangeM) {
      let [yyyy, mm, dd] = startDate.split("-");
      const beforeDays = new Date(yyyy, mm, 0).getDate();
      yyyy = Number(yyyy);
      mm = Number(mm);
      dd = Number(dd);
      mm += rangeM;
      if (mm < 1) {
        yyyy--;
        mm = 12 + mm;
      }
      if (mm > 12) {
        yyyy++;
        mm = mm - 12;
      }
      const afterDays = new Date(yyyy, mm, 0).getDate();
      if (rangeM < 0) {
        dd++;
        if (dd > beforeDays || dd > afterDays) {
          dd = 1;
          mm++;
        }
        if (mm > 12) {
          yyyy++;
          mm = mm - 12;
        }
      } else {
        dd--;
        if (dd > afterDays) {
          dd = afterDays;
        }
        if (dd < 1) {
          mm--;
        }
        if (mm < 1) {
          yyyy--;
          mm = 12 + mm;
        }
        if (dd < 1) {
          dd = new Date(yyyy, mm, 0).getDate();
        }
      }
      mm = String(mm).padStart(2, "0");
      dd = String(dd).padStart(2, "0");
      return [yyyy, mm, dd].join("-");
    },
    /**
     * 校验是否全屏
     */
    checkScreenFull() {
      const a =
        document.mozFullScreen ||
        document.fullScreen ||
        document.webkitIsFullScreen;
      const b =
        document.webkitRequestFullScreen ||
        document.mozRequestFullScreen ||
        document.msFullscreenEnabled;
      this.isScreenFull = a || b;
    },
    /**
     * 生成uuid
     */
    getUUID() {
      const crypto = window.crypto || window.msCrypto;
      const array = new Uint32Array(1);
      const r = crypto.getRandomValues(array)[0];
      return Date.now() + "2" + r;
    },
  },
  beforeDestroy() {
    if (this.resizeObserver) {
      this.resizeObserver.disconnect();
    }
    clearTimeout(this.resizeTiming);
  },
};
</script>
<style scoped lang="scss">
.quick-tool {
  position: absolute;
  height: 100%;
  left: calc(100% + 6px);
  top: 0;
  padding-right: 40px;
  z-index: 999;
  pointer-events: none;
  * {
    pointer-events: auto;
  }
  &.full {
    left: auto;
    right: 20px;
    height: calc(100% - 100px);
    top: 20px;
  }
  .common-tool {
    width: 338px;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    border-radius: 8px;
    margin-right: 6px;
    display: flex;
    flex-direction: column;
    .tool-tag {
      display: flex;
      justify-content: space-between;
      height: 48px;
      line-height: 48px;
      text-align: center;
      padding: 0 5px;
      position: relative;
      overflow: hidden;
      &:after {
        content: "";
        width: 100%;
        height: 1px;
        position: absolute;
        bottom: 0;
        left: 0;
        background: linear-gradient(
          270deg,
          rgba(255, 255, 255, 0) 0%,
          #ffffff 50%,
          rgba(255, 255, 255, 0) 100%
        );
      }
      span {
        color: rgba(255, 255, 255, 0.7);
        font-size: 16px;
        cursor: pointer;
        position: relative;
        &.on {
          font-weight: 600;
          color: #ffffff;
          text-shadow: 0px 0px 10px rgba(255, 255, 255, 0.7);
          &:after {
            content: "";
            width: 98px;
            height: 10px;
            position: absolute;
            bottom: 0;
            transform: translateX(-50%);
            background: url("~@/assets/image/tag-btm-guang.png") no-repeat
              bottom center;
            pointer-events: none;
            left: calc(-1000px + 50%);
            filter: drop-shadow(#fff 1000px 0);
          }
        }
      }
    }
    .tool-con {
      flex: 1;
      overflow: auto;
      margin: 12px 0;
      .tool-control {
        display: flex;
        flex-direction: column;
        height: 100%;
        .control {
          display: flex;
          justify-content: center;
          font-size: 14px;
          &-left {
            width: 168px;
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 6px;
            margin-right: 12px;
            i {
              display: flex;
              align-items: center;
              justify-content: center;
              aspect-ratio: 1;
              color: #fff;
              background: rgba(255, 255, 255, 0.2);
              border-radius: 8px;
              cursor: pointer;
              &:before {
                display: block;
                transform: rotate(var(--rotate));
              }
              &:hover {
                opacity: 0.6;
              }
              &:active {
                opacity: 0.8;
              }
            }
          }
          &-right {
            width: 136px;
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            .item {
              height: 32px;
              color: #fff;
              background: rgba(255, 255, 255, 0.2);
              border-radius: 4px;
              display: flex;
              align-items: center;
              justify-content: center;
              overflow: hidden;
              .iconfont {
                font-size: 16px;
                cursor: pointer;
                margin: 0 6px;
                &:hover:before {
                  opacity: 0.6;
                }
                &:active:before {
                  opacity: 0.8;
                }
              }
              .it {
                flex: 1;
                white-space: nowrap;
                display: flex;
                align-items: center;
                justify-content: center;
                &:nth-child(2) {
                  border-left: 1px dotted rgba(255, 255, 255, 0.2);
                }
                .ll {
                  color: #fff;
                  font-size: 14px;
                }
                .time {
                  font-size: 14px;
                }
                &.control-step {
                  display: flex;
                  justify-content: center;
                  align-items: center;
                  input {
                    width: 1.5em;
                    font-size: 14px;
                    text-align: center;
                    background: none;
                    color: #fff;
                  }
                  .bb {
                    width: 16px;
                    overflow: hidden;
                    i {
                      display: block;
                      height: 7px;
                      overflow: hidden;
                      position: relative;
                      cursor: pointer;
                      &:before {
                        content: "";
                        width: 0;
                        height: 0;
                        position: absolute;
                        left: 50%;
                        transform: translateX(-50%);
                        border: 4px solid transparent;
                        border-top-width: 6px;
                        border-bottom-width: 6px;
                        margin: 0 auto;
                      }
                      &.up:before {
                        border-bottom-color: #fff;
                        bottom: 0;
                      }
                      &.down {
                        margin-top: 2px;
                        &:before {
                          border-top-color: #fff;
                          top: 0;
                        }
                      }
                      &:hover {
                        opacity: 0.6;
                      }
                      &:active {
                        opacity: 0.8;
                      }
                      &.disabled {
                        opacity: 0.4;
                        cursor: not-allowed;
                      }
                    }
                  }
                }
              }
            }
          }
        }
        .preset-list {
          display: flex;
          flex-direction: column;
          flex: 1;
          margin: 12px 12px 0;
          .til {
            height: 32px;
            line-height: 32px;
            font-size: 14px;
            .ll {
              display: block;
              float: left;
              color: #fff;
              font-size: 16px;
              font-weight: bold;
            }
            .add-preset {
              float: right;
              width: 78px;
              &:before {
                content: "\e895";
                font-family: "iconfont" !important;
                margin-right: 5px;
              }
            }
          }
          .con {
            flex: 1;
            position: relative;
            min-height: 108px;
            .item {
              height: 32px;
              line-height: 32px;
              margin-top: 12px;
              display: flex;
              justify-content: space-between;
              align-items: center;
              .name {
                width: 230px;
                margin-right: 6px;
                &.long {
                  width: 100%;
                  margin-right: 0;
                }
                /deep/ .el-input__inner {
                  &:read-only {
                    cursor: pointer;
                  }
                }
                /deep/ .el-input__suffix {
                  right: 10px;
                }
                i {
                  display: inline-block;
                  cursor: pointer;
                  margin-left: 12px;
                  font-size: 14px;
                  &.ok {
                    color: #21e1a4;
                  }
                  &.cancel {
                    color: #eb5257;
                    font-weight: bold;
                  }
                }
              }
              .btn {
                color: #fff;
                font-size: 18px;
                cursor: pointer;
                width: 20px;
                height: 20px;
                line-height: 20px;
                text-align: center;
                &.hide {
                  visibility: hidden;
                }
                &:hover {
                  opacity: 0.6;
                }
                &:active {
                  opacity: 0.8;
                }
                &.ok {
                  color: #21e1a4;
                  font-size: 14px;
                }
                &.cancel {
                  color: #eb5257;
                  font-size: 14px;
                  font-weight: bold;
                }
              }
            }
          }
        }
      }
      .tool-cruise {
        display: flex;
        flex-direction: column;
        height: 100%;
        .cruise-search {
          margin: 0 12px;
          width: auto !important;
        }
        .cruise-list {
          margin: 12px 12px 0;
          flex: 1;
          position: relative;
          min-height: 108px;
          .item {
            height: 49px;
            border-bottom: 1px solid rgba(232, 243, 254, 0.2);
            display: flex;
            align-items: center;
            .ll {
              color: #fff;
              font-size: 12px;
              flex: 1;
              line-height: 48px;
              text-overflow: ellipsis;
              white-space: nowrap;
              overflow: hidden;
            }
            .bb {
              width: 48px;
              height: 24px;
              line-height: 24px;
              text-align: center;
              color: #fff;
              font-size: 12px;
              background: rgba(255, 255, 255, 0.4);
              border-radius: 4px;
              margin-left: 12px;
              cursor: pointer;
              &.on {
                background: rgba(255, 255, 255, 0.2);
              }
              &:hover {
                opacity: 0.6;
              }
              &:active {
                opacity: 0.8;
              }
            }
          }
        }
      }
      .tool-history {
        height: 100%;
      }
      .tool-alarm {
        display: flex;
        flex-direction: column;
        height: 100%;
        .alarm-search {
          margin: 0 12px;
          width: auto !important;
        }
        .alarm-list {
          margin: 12px 0 0;
          flex: 1;
          position: relative;
          min-height: 134px;
          .item {
            height: 110px;
            margin: 0 12px;
            border-bottom: 1px solid rgba(232, 243, 254, 0.2);
            padding: 12px 0;
            display: flex;
            position: relative;
            z-index: 2;
            cursor: pointer;
            &.on:after {
              content: "";
              width: calc(100% + 24px);
              height: 100%;
              background: rgba(255, 255, 255, 0.2);
              position: absolute;
              left: -12px;
              top: 0;
              z-index: -1;
            }
            img {
              display: block;
              height: 100%;
              width: 130px;
              object-fit: cover;
              border-radius: 4px;
              margin-right: 12px;
            }
            .type {
              height: 24px;
              line-height: 24px;
              padding: 0 6px;
              font-style: normal;
              background: rgba(0, 0, 0, 0.7);
              color: #fff;
              font-size: 12px;
              border-radius: 0 4px;
              position: absolute;
              left: 0;
              bottom: 12px;
              max-width: 116px;
              text-overflow: ellipsis;
              white-space: nowrap;
              overflow: hidden;
            }
            .info {
              flex: 1;
              overflow: hidden;
              position: relative;
              span {
                display: block;
                text-overflow: ellipsis;
                white-space: nowrap;
                overflow: hidden;
              }
              .ll {
                font-size: 14px;
                line-height: 1;
                color: #fff;
                font-weight: bold;
                margin-right: 16px;
              }
              .addr {
                font-size: 12px;
                line-height: 1;
                color: rgba(255, 255, 255, 0.7);
                margin-top: 12px;
              }
              .time {
                font-size: 12px;
                line-height: 1;
                color: rgba(255, 255, 255, 0.7);
                margin-top: 6px;
              }
              .over {
                display: inline-block;
                font-size: 12px;
                line-height: 24px;
                padding: 0 9px;
                background: rgba(255, 255, 255, 0.2);
                border-radius: 12px;
                color: #fff;
                max-width: 116px;
                margin-top: 6px;
              }
              .collect {
                font-size: 18px;
                line-height: 1;
                position: absolute;
                top: 0;
                right: 0;
                color: #fff;
                cursor: pointer;
              }
              .bb {
                display: block;
                width: 48px;
                height: 24px;
                line-height: 24px;
                text-align: center;
                background: rgba(255, 255, 255, 0.4);
                border-radius: 4px;
                color: #fff;
                font-size: 12px;
                position: absolute;
                bottom: 0;
                right: 0;
                cursor: pointer;
                &:hover {
                  opacity: 0.6;
                }
                &:active {
                  opacity: 0.8;
                }
              }
            }
          }
          .c-page {
            width: calc(100% - 24px);
            height: 22px;
            line-height: 22px;
            position: absolute;
            left: 12px;
            bottom: 0;
            display: flex;
            justify-content: flex-end;
            text-align: center;
            .c-total {
              color: #fff;
              font-size: 12px;
            }
            .c-pagination {
              margin: 0 6px;
              padding: 0;
              overflow: hidden;
              /deep/ button,
              /deep/ li {
                background: none;
                height: 22px;
                line-height: 22px;
                margin: 0;
                min-width: 22px;
                padding: 0 4px;
                color: #fff !important;
                &:before {
                  line-height: inherit;
                }
                i {
                  line-height: 24px;
                }
                &:hover {
                  opacity: 0.6;
                }
                &:active {
                  opacity: 0.8;
                }
                &.active {
                  background: rgba(255, 255, 255, 0.2);
                  border-radius: 4px;
                  opacity: 1;
                }
                &:disabled {
                  opacity: 0.4;
                }
              }
            }
            .c-refresh {
              color: #fff;
              cursor: pointer;
              &:hover {
                opacity: 0.6;
              }
              &:active {
                opacity: 0.8;
              }
            }
          }
        }
      }
    }
  }
  .tool-btns {
    position: absolute;
    width: 40px;
    right: 0;
    bottom: 0;
    .b-scale {
      background: rgba(0, 0, 0, 0.7);
      border-radius: 8px;
    }
    i {
      display: block;
      width: 40px;
      height: 40px;
      text-align: center;
      line-height: 40px;
      color: #fff;
      cursor: pointer;
      font-size: 24px;
      &[disabled] {
        cursor: not-allowed;
        &:before {
          opacity: 0.4;
        }
      }
    }
    .tool-btn {
      font-size: 24px;
      background: rgba(0, 0, 0, 0.7);
      border-radius: 8px;
      margin-top: 6px;
    }
  }
}
</style>
